import {Component, HostListener, Input, OnDestroy, OnInit, Output, EventEmitter, OnChanges, SimpleChanges, ViewEncapsulation} from '@angular/core';
import {fromEvent} from "rxjs";
import {throttleTime} from "rxjs/operators";
import {AppService} from "../../../../app.service";
import {GlobalEvent} from "../../../../support/event.definition";

@Component({
  selector: 'div.ss-platform-table-scrollbar',
  templateUrl: 'scrollbar.component.html',
  styleUrls: ['scrollbar.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ScrollbarComponent implements OnInit, OnChanges, OnDestroy {

  // 是否拖拽
  private isBeginDrag: boolean = false;
  // 拖拽时开始的坐标
  private beginDragX: number = 0;
  // 拖拽时、滚动条的左侧距离
  private beginDragScrollbarX: number = 0;
  // 滚动条 size
  @Input("ss-size")
  size: number = 0;
  @Input("ss-targetSize")
  targetSize: number = 0;
  // 滚动条内容 size
  barSize: number = 0;
  // 滚动条3D移动字符串
  scrollbarTransform: string = "translate3d(0px, 0px, 0px)";
  // 是否激活、锁定滚动条样式
  isActive: boolean = false;
  // 销毁订阅事件
  private unSubscription: any;
  // 是否启用
  isEnabled: boolean = false;
  // value
  value: number;
  valueTransform: string = "translate3d(0px, 0px, 0px)";

  @Output("scroll")
  scroll: EventEmitter<any> = new EventEmitter<any>();

  constructor(private $app: AppService) {
  }

  ngOnInit(): void {
    // 初始化 滚动条
    this.unSubscription = fromEvent(document, "mousemove").pipe(throttleTime(30)).subscribe((event: MouseEvent) => {
      if (this.isBeginDrag) {
        let size = (event.clientX - this.beginDragX) + this.beginDragScrollbarX;
        // 过大
        if (size + this.barSize > this.size) {
          size = this.size - this.barSize;
        }
        size = size <= 0 ? 0 : size
        this.scrollbarTransform = `translate3d(${size}px, 0px, 0px)`;
        this.value = size / (this.size - this.barSize);
        this.valueTransform = 'translate3d(' + -((this.targetSize - this.size) * this.value) + 'px, 0px, 0px)';
        this.scroll.emit(this.value)
        this.$app.publish(GlobalEvent.ScrollTable);
      }
    });
  }

  @HostListener('mousedown', ['$event'])
  mousedown($event: MouseEvent): void {
    if (this.isEnabled) {
      this.isBeginDrag = true;
      this.beginDragX = $event.clientX;
      this.beginDragScrollbarX = parseFloat(this.scrollbarTransform.substr(12).split(",")[0].replace("px", ""));
    }
  }


  active(): void {
    this.isActive = true;
    /*setTimeout(() => {
      let unSubscription = fromEvent(window, "mouseup").subscribe(() => {
        unSubscription.unsubscribe();

      });
    });*/
  }

  @HostListener('document:mouseup', ['$event'])
  mouseup($event: MouseEvent): void {
    this.isBeginDrag = false;
    this.isActive = false;
  }

  ngOnDestroy(): void {
    this.unSubscription.unsubscribe();
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes.hasOwnProperty("size")) {
      this.size = changes["size"].currentValue;
    }
    if (changes.hasOwnProperty("targetSize")) {
      this.targetSize = changes["targetSize"].currentValue;
    }
    this.targetSize = this.size > this.targetSize ? this.size : this.targetSize;
    this.barSize = this.size * (this.size / this.targetSize);
    this.isEnabled = this.targetSize > this.size;
  }
}

